<template>
    <div id="single-blog">
        <h1>标题：{{blog.title}}</h1>
        <p><strong>内容：</strong>{{blog.content}}</p> 
        <p><strong>作者：</strong>{{blog.author}}</p>
        <p><strong>分类：</strong></p>
        <ul v-for="category in blog.categories">
            <li>{{category}}</li>
        </ul>
    </div>
</template>
<script>
    export default{
        name:"single-blog",
        data(){
            return{
                id:this.$route.params.id,
                blog:{}
            }
        },
        created() {
            this.$http.get("https://vuedemo-123.firebaseio.com/posts/"+this.id+".json").
            then(function(data){
                // this.blog = data.body
                return data.json();
            }).then(function(data){
                this.blog=data;

            })
        },
    }
</script>
<style scoped>
h1{
    margin: 0 0 20px;
}
#single-blog{
    margin:0 auto;
    max-width: 960px;
    padding: 30px;
    border: 1px dotted #eee;
    background: #ccc;
}
</style>

